<template>
	<view class="wrapper form">
		<view class="flex form-item items-center">
			<text class="label">工号</text>
			<input type="text" placeholder="请输入工号" />
		</view>
		<view class="flex form-item items-center m-top-20">
			<text class="label">密码</text>
			<input type="text" placeholder="请输入密码" />
		</view>
	</view>
</template>

<script lang="ts" setup>
// vue生命周期
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
// uni-app生命周期
import { onLoad, onShow, onHide, onReady, onUnload } from '@dcloudio/uni-app'
// Vue 3 生命周期钩子
// 先打印了uniapp的生命周期，再打印了Vue的生命周期
onBeforeMount(() => {
	console.log('Vue3: onBeforeMount')
})

onMounted(() => {
	console.log('Vue3: onMounted')
})

onBeforeUpdate(() => {
	console.log('Vue3: onBeforeUpdate')
})

onUpdated(() => {
	console.log('Vue3: onUpdated')
})

onBeforeUnmount(() => {
	console.log('Vue3: onBeforeUnmount')
})

onUnmounted(() => {
	console.log('Vue3: onUnmounted')
})

// UniApp 生命周期钩子
onLoad(() => {
	console.log('UniApp: onLoad - 页面加载')
})

onShow(() => {
	console.log('UniApp: onShow - 页面显示')
})

onHide(() => {
	console.log('UniApp: onHide - 页面隐藏')
})

onReady(() => {
	console.log('UniApp: onReady - 页面初次渲染完成')
})

onUnload(() => {
	console.log('UniApp: onUnload - 页面卸载')
})
</script>

<style scoped lang="scss">
.wrapper {
	margin-top: 40rpx;
}
.form {
	padding: 0rpx 40rpx;
	font-size: 32rpx;
	.form-item {
		flex: 1;
		.label {
			width: 80rpx;
			color: #333;
		}
		input {
			font-size: 28rpx;
			height: 60rpx;
			border: 1px solid #ccc;
			border-radius: 10rpx;
			padding-left: 8px;
			flex: 1;
			box-sizing: border-box;
		}
		:deep(.input-placeholder) {
			font-size: 28rpx;
			height: 40rpx;
			line-height: 40rpx;
			color: #ccc;
		}
	}
}

.flex {
	display: flex;
}

.justify-center {
	justify-content: center;
}

.items-center {
	align-items: center;
}

.m-top-20 {
	margin-top: 20rpx;
}
</style>
